<template>
    <el-form-item>
        <el-button @click="onSubmit">保存</el-button>
    </el-form-item>
    <h2 style="margin-left: 400px;">动力准备单</h2>
    <table class="order-table">
        <tr>
            <th colspan="6" style="text-align: left;">基本信息</th>
        </tr>
        <tr>
            <td>动力准备日期：</td>
            <td>
                <el-date-picker v-model="form.impetusId" type="date" placeholder="Pick a date" style="width: 100%" />
            </td>
            <td>水压：</td>
            <td><el-input v-model="form.hydraulic" placeholder="请输入水压"/></td>
        </tr>
        <tr>
            <td>水位：</td>
            <td><el-input v-model="form.waterLevel" placeholder="请输入水位"/></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>水质情况描述：</td>
            <td colspan="3"><el-input v-model="form.waterQuality" type="textarea" placeholder="请输入水质情况描述"/></td>
        </tr>
        <tr>
            <td>电压：</td>
            <td><el-input v-model="form.voltage" placeholder="请输入电压"/></td>
            <td>电流：</td>
            <td><el-input v-model="form.current" placeholder="请输入电流"/></td>
        </tr>
        <tr>
            <td>电量储备：</td>
            <td><el-input v-model="form.powerReserve" placeholder="请输入电量储备"/></td>
            <td>气压：</td>
            <td><el-input v-model="form.vaporPressure" placeholder="请输入气压"/></td>
        </tr>
        <tr>
            <td>汽量：</td>
            <td><el-input v-model="form.vaporVolume" placeholder="请输入汽量"/></td>
            <td>蒸汽温度：</td>
            <td><el-input v-model="form.steamTemperature" placeholder="请输入蒸汽温度"/></td>
        </tr>
        <tr>
            <td>CO₂压力：</td>
            <td><el-input v-model="form.cO2pressure" placeholder="请输入CO₂压力"/></td>
            <td>CO₂储量：</td>
            <td><el-input v-model="form.cO2Reserves" placeholder="请输入CO₂储量"/></td>
        </tr>
        <tr>
            <td>操作人员：</td>
            <td><el-input v-model="form.operators" placeholder="请输入操作人员" disabled/></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>备注：</td>
            <td colspan="3"><el-input v-model="form.remark" type="textarea" placeholder="请输入备注"/></td>
        </tr>
    </table>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, onMounted } from 'vue'
import dayjs from 'dayjs'
import { useCounterStore } from "@/stores/counter";
import { ElMessage } from 'element-plus'
import { useRouter,useRoute } from 'vue-router'
import axios from 'axios'
import {read,write} from '@/axios/axiosHelper'

const router = useRouter()
const route = useRoute()

const store = useCounterStore();

// do not use same name with ref
const form = reactive({
    powerId:route.query.powerId,
    impetusId: '',
    hydraulic: '',
    waterLevel: '',
    waterQuality: '',
    voltage: '',
    current: '',
    powerReserve: '',
    vaporPressure: '', 
    vaporVolume: '', 
    steamTemperature:'',
    cO2pressure: '',
    cO2Reserves: '',
    operators: store.counterStore.userName,
    remark:''
});

onMounted(()=>{
    Fan();
})

const Fan=()=>{
    read.get("f-read/api/Power/ShowPower",{
        params:{
            powerId:route.query.powerId,
        }
    })
    .then(res=>{
        form.impetusId = res.data.data[0].impetusId;
        form.hydraulic = res.data.data[0].hydraulic;
        form.waterLevel = res.data.data[0].waterLevel;
        form.waterQuality = res.data.data[0].waterQuality;
        form.voltage = res.data.data[0].voltage;
        form.current = res.data.data[0].current;
        form.powerReserve = res.data.data[0].powerReserve;
        form.vaporPressure = res.data.data[0].vaporPressure;
        form.vaporVolume = res.data.data[0].vaporVolume;
        form.steamTemperature = res.data.data[0].steamTemperature;
        form.cO2pressure = res.data.data[0].cO2pressure;
        form.cO2Reserves = res.data.data[0].cO2Reserves;
        form.remark = res.data.data[0].remark;
        console.log("反填数据",res.data.data);
    })
}
 
const onSubmit = () => {
    write.post("f-write/api/Power/UpdPower",form)
    .then(res=>{
        if(res.data.code == 200){
            ElMessage.success(res.data.msg)
            router.push("/QueryPower")
        }
        else{
            ElMessage.error(res.data.msg)   
            return;
        }
    })
}

</script>



<style scoped>
.order-table {
    border-collapse: collapse;
    width: 100%;
}

.order-table th,
.order-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

.order-table th {
    background-color: #f2f2f2;
}
</style>

<style scoped>
#app {
    padding: 20px;
}
</style>